<template>
  <div class="burger-select">
    <Input
      :size="size"
      class="one-icon"
      v-model="currentLabel"
      readonly
      :disabled="disabled"
      @click="handleClick"
      @blur="handleBlur"
      @mouseover="handleMouseover"
      @mouseout="handleMouseout"
    >
      <template #suffix>
        <img
          class="down"
          :class="[display ? 'up' : '', disabled ? 'disabled' : '', size]"
          src="../assets/icon/arrow-bottom.svg"
          alt="arrow-bottom"
          v-show="!disabled && !showClose"
        />
        <img
          class="delete"
          :class="[disabled ? 'disabled' : '', size]"
          src="../assets/icon/delete.svg"
          alt="delete"
          v-if="!disabled && allowClear"
          v-show="showClose"
          @click.stop="handleClear"
        />
      </template>
    </Input>
    <ul
      ref="optionRef"
      class="burger-select-option"
      :class="[size, display ? 'show' : 'hide']"
      :style="{ height: display ? `${optionHeight}px` : 0 }"
    >
      <li
        v-for="(item, index) in options"
        :key="item.value"
        :tabindex="index"
        :class="[modelValue === item.value ? 'active' : '', size]"
        @mousedown="handleChange(item)"
      >
        {{ item.label ? item.label : item.value }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Select',
};
</script>

<script setup lang="ts">
import { computed, PropType, ref, watch } from 'vue';
import { Input } from '../index';
import { SelectOption, SizeType } from './types';

const props = defineProps({
  modelValue: {
    type: String,
    default: undefined,
  },
  size: {
    type: String as PropType<keyof typeof SizeType>,
    default: undefined,
  },
  options: {
    type: Array as PropType<SelectOption[]>,
    default: () => {
      return [];
    },
  },
  allowClear: {
    type: Boolean,
    default: undefined,
  },
  disabled: {
    type: Boolean,
    default: undefined,
  },
});

// 显示选项
const display = ref(false);

// 显示清空按钮
const showClose = ref(false);

// 显示的值
const currentLabel = computed(
  () =>
    props.options.find((item) => item.value === props.modelValue)?.label || '',
);

// 更新v-model绑定的值
const emits = defineEmits(['update:modelValue', 'change']);

const handleChange = (item: SelectOption) => {
  emits('update:modelValue', item.value);
  emits('change', item.value);
  display.value = false;
  console.log('handleChange');
};

// 清空值
const handleClear = () => {
  if (props.disabled) return;
  emits('update:modelValue', null);
  showClose.value = false;
};

/**
 * @description 计算下拉元素总高度
 */
const optionHeight = computed(() => {
  const unitHeight = !props.size
    ? SizeType.default
    : SizeType[props.size] || SizeType.default;
  return unitHeight * props.options.length + 8;
});

// 点击事件
const handleClick = () => {
  if (!props.disabled) {
    display.value = !display.value;
  }
};

const handleBlur = () => {
  display.value = false;
  console.log('handleBlur');
};

const handleMouseover = () => {
  if (
    props.allowClear &&
    props.modelValue !== null &&
    props.modelValue !== void 0
  ) {
    showClose.value = true;
  }
};

const handleMouseout = () => {
  showClose.value = false;
};
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
